<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{background: #000}
  .fr{float: right;}
  #box{width: 640px;height: 500px;background: #EFEFE7;margin: 60px auto;position: relative;}
  .p1{width: 450px;font-size: 16px;line-height: 28px;background: #fff;padding: 25px;display: inline-block;margin: 50px 10px 0 25px;text-indent: 2em;}
  .p1 span{background: #FFFF00;}
  ul{display: inline-block;position: absolute;top: 40px; }
  li{list-style: none;width: 80px;height: 40px;margin-bottom: 5px;text-align: center;line-height: 40px;cursor: pointer;}
  .li_1{color:#EFEFE7;background: #94948C;font-weight: bolder;display: inline-block;}
  .li_2{display: none;}
  .li_2_1{background: #F75D03;color: #fff;font-weight: bolder;}
  .li_2_2{background: #ccc;}
  .div1{width: 490px;height: 120px;border: 10px solid #E71063;margin: 10px;background: #E7E7B5;padding: 5px;display: none}
  .div1 strong{cursor: pointer;}
  .p2{width: 460px;border-bottom: 2px solid #E73100;margin: 15px}
  .p2 span{width: 80px;height: 30px;display: inline-block;text-align: center;line-height: 30px;cursor: pointer;}
  .span1{background: #E73100;color: #fff;font-weight: bolder;}
  .div2{margin-left: 15px;display: none;}
  .div2 input{width: 180px;height: 30px;}
  .div2 button{width: 40px;height: 30px;border-radius: 5px;}
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var Box = document.getElementById('box');
      var P = Box.getElementsByTagName('p')[0];
      var Li = Box.getElementsByTagName('li');
      var Div1 = Box.getElementsByClassName('div1')[0];
      var Span = Div1.getElementsByTagName('span');
      var Div2 = Div1.getElementsByClassName('div2');
      var Str = Div1.getElementsByTagName('strong')[0];
      var Inp = Div1.getElementsByTagName('input');
      var Btn = Div1.getElementsByTagName('button');
      var Onoff = true;
      Li[0].onclick = function(){
        for (var i = 1; i < Li.length; i++) {
          if(Onoff){
            Li[i].style.display = 'block';
            Li[i].className = 'li_2_2'
          }else{
            Li[i].style.display = 'none';
          }
        };
        Onoff = !Onoff;
      }
      for (var i = 1; i < Li.length; i++){
        Li[i].index = i;
        Li[i].onmouseover = function(){
          this.className = 'li_2_1';
        }
        Li[i].onmouseout = function(){
          this.className = 'li_2_2';
        }
        Li[i].onclick = function(){
          for (var i = 1; i < Li.length; i++) {
            Li[i].style.display = 'none';
          };
          Onoff = !Onoff;
          Div1.style.display = 'block';
          for (var i = 0; i < Span.length; i++) {
            Span[i].className = "";
            Div2[i].style.display = 'none'
          };
          Span[this.index - 1].className = 'span1';
          Div2[this.index - 1].style.display = 'block';
        }
      };
      Str.onclick = function(){
        Div1.style.display = 'none';
      }
      for (var i = 0; i < Span.length; i++) {
        Span[i].index = i
        Span[i].onclick = function(){
          for (var i = 0; i < Span.length; i++) {
            Span[i].className = "";
            Div2[i].style.display = 'none'
          };
          this.className = 'span1';
          Div2[this.index].style.display = 'block';
          P.innerHTML = P.innerHTML.replace(/<span>/g,'')
          P.innerHTML = P.innerHTML.replace(/<\/span>/g,'')
        }
      };
      Btn[0].onclick = function(){
         P.innerHTML = P.innerHTML.replace(/<span>/g,'')
         P.innerHTML = P.innerHTML.replace(/<\/span>/g,'')
        var str = Inp[0].value;
        if(!str){
          alert("请输入查找内容")
        }else{
          if(P.innerHTML.indexOf(str) === -1){
            alert("对不起，没有查找到您要查找的：" + str);
          }else{
            P.innerHTML = P.innerHTML.split(str).join('<span>' + str + '</span>')
          }
        }
        Inp[0].value = '';
      }
      Btn[1].onclick = function(){
         P.innerHTML = P.innerHTML.replace(/<span>/g,'')
         P.innerHTML = P.innerHTML.replace(/<\/span>/g,'')
        var str = Inp[1].value;
        var NewStr = Inp[2].value;
        if(!NewStr){
          alert("请输入替换的内容")
        }else{
          P.innerHTML = P.innerHTML.split(str).join('<span>' + NewStr + '</span>')
        }
        Inp[1].value = '';
        Inp[2].value = '';
      }
    }
  </script>
</head>
<body>
  <div id="box">
    <p class="p1">万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web信息的无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。</p>
    <ul>
      <li class="li_1">展开</li>
      <li class="li_2">查找</li>
      <li class="li_2">替换</li>
    </ul>
    <div class="div1">
      <strong class="fr">X</strong>
      <p class="p2"><span>查找</span><span>替换</span></p>
      <div class="div2">
        <input type="text">
        <button>查找</button>
      </div>
      <div class="div2">
        <input type="text">
        <input type="text">
        <button>替换</button>
      </div>
    </div>
  </div>
</body>
</html>
</body>
</html>